<template>
	<view class="apply-details">
		<uni-nav-bar dark :fixed="true" :border="false" background-color="#FFFFFF" status-bar title="详情"
			left-icon="left" @clickLeft="toBack" color="#000" />
		<view class="apply-details-body">
			<u--form labelPosition="top" :labelWidth="100" :labelStyle="labelStyle">
				<u-form-item label="申请状态">
					<view style="width: 100rpx;">
						<u-tag text="待审批" type="warning" plain plainFill
							size="mini" v-if="apply.approvalStatus === 0">
						</u-tag>
						<u-tag text="已通过" type="success" plain plainFill
							size="mini" v-if="apply.approvalStatus === 1">
						</u-tag>
						<u-tag text="未通过" type="error" plain plainFill
							size="mini" v-if="apply.approvalStatus === 2">
						</u-tag>
					</view>
				</u-form-item>
				<u-form-item label="请假类型" v-if="apply.applyType === 0">
					<text v-if="apply.vacateType === 0">
						事假
					</text>
					<text v-if="apply.vacateType === 1">
						病假
					</text>
					<text v-if="apply.vacateType === 2">
						其他
					</text>
				</u-form-item>
				<u-form-item label="开始时间" v-if="apply.applyType !== 1">
					<text>{{apply.startTime}}</text>
				</u-form-item>
				<u-form-item label="结束时间" v-if="apply.applyType !== 1">
					<text>{{apply.stopTime}}</text>
				</u-form-item>
				<u-form-item label="补卡日期" v-if="apply.applyType === 1">
					<text>{{apply.clockingDate}}</text>
				</u-form-item>
				<u-form-item label="补卡班次" v-if="apply.applyType === 1">
					<text>{{apply.stringLot}}</text>
				</u-form-item>
				<u-form-item label="申请事由">
					<text>{{apply.applyExplain}}</text>
				</u-form-item>
				<u-form-item label="出差地点" v-if="apply.applyType === 2 ||
					apply.applyType === 3">
					<text>{{apply.location}}</text>
				</u-form-item>
				<u-form-item label="说明附件">
					<view style="display: flex;">
						<view v-for="(item,index) in imgList" :key="index"
							style="width: 100rpx;height: 100rpx;margin-right: 20rpx;" 
							@click="previewImg()">
							<image style="width: 100%; height: 100%;border-radius: 8rpx;" 
								mode="aspectFill" :src="READ_IMG_URL+item">
							</image>
						</view>
					</view>
				</u-form-item>
			</u--form>
		</view>
	</view>
</template>

<script>
	import attendanceApi from '../../request/attendanceApi';
	import config from '@/request/config.js';
	export default {
		data() {
			return {
				READ_IMG_URL: config.READ_IMG_URL,
				userInfo: {},
				apply: {},
				imgList: [],
				labelStyle: {
					color: "#909399" 
				}
			}
		},
		onLoad(params) {
			this.userInfo = uni.getStorageSync("loginUser");
			console.log("params===>", params);
			if (params.id !== null && params.id !== ""){
				this.getAttendanceApply(params.id);
			}
		},
		methods: {
			// 返回上个页面
			toBack() {
				uni.navigateBack({
					delta: 1, // 返回的页面数，1表示返回上一页
					animationType: 'pop-out', // 页面关闭的动画效果
					animationDuration: 300, // 页面关闭的动画时间
				});
			},
			// 获取单个记录
			getAttendanceApply(id){
				const data = {
					id: id
				}
				attendanceApi.getAttendanceApply(data).then(res =>{
					if (res.code === 200){
						this.apply = res.data;
						if (res.data.accessoryUrl !== null){
							this.imgList = res.data.accessoryUrl.split(";");
						}
					}
				})
			},
			// 预览图片
			previewImg() {
				let newList = []
				this.imgList.forEach(item =>{
					newList.push(this.READ_IMG_URL+item)
				})
				uni.previewImage({
					urls: newList,
					showmenu: false
				});
			},
		}
	}
</script>

<style>
	.apply-details {
		min-height: 100vh;
		background-color: #eeeeef;
	}
	
	.apply-details-body{
		background-color: #ffffff;
		margin-top: 20rpx;
		padding-left: 15rpx;
	}
</style>